<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<h3>相册</h3>
{% if page_obj %}
    {% for album in page_obj %}
        <a href="{% url 'gallery:album_detail' album.pk album.slug %}">
            <img src="{{ album.thumb.url }}" class="img-responsive dpg-album-image" />
        </a>
        <p>{{ album.title }}</p>
    {% endfor %}
    {% if is_paginated %}
        <ul class="paginated">
            {% if page_obj.has_previous %}
                <li class="page-item"><a class="page-link" href="?page={{ page_obj.previous_page_number }}">Previous</a></li>
             {% else %}
                <li class="page-item disabled"><span class="page-link">Previous</span></li>
            {% endif %}
            {% for i in paginated.page_range %}
                {% if page_obj.number == i %}
                    <li class="page-item active"><span class="page-link">{{ i }}<span class="sr-only">(current)</span></span></li>
                {% else %}
                    <li class="page-item"><a class="page-link" href="?page={{ i }}">{{ i }}</a> </li>
                {% endif %}
            {% endfor %}
            {% if page_obj.has_next %}
                <li class="page-item"><a class="page-link" href="?page={{ page_obj.next_page_number }}">Next</a></li>
            {% else %}
                <li class="page-item disabled"><span class="page-link">Next</span></li>
            {% endif %}
        </ul>
    {% endif %}
{% else %}
    <p>No album yet</p>
{% endif %}
</body>
</html>